<template>
  <div class="billStatus">
    <!-- <el-steps direction="vertical" :active="2" align-center finish-status="success">
      <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
    </el-steps>-->
    <div class="info">
      <div class="item">运单ID: <span class="content"> {{row.add_id + '-' + row.id}} </span></div>
      <div class="item">司机姓名: <span class="content">{{row.sj_name}}</span></div>
      <div class="item">手机号: <span class="content">{{row.mobile_display}}</span></div>
    </div>
    <el-timeline :reverse="false">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.action_time"
      >
        <p class="title">{{activity.action_name}}</p>
        <p>{{activity.action_person}}</p>
        <p v-if="activity.device" style="margin-top:5px;color:#909399">设备名称: {{activity.device}}</p>
        <p v-if="activity.ip" style="color:#909399">IP地址: {{activity.ip}}</p>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { getBillLog } from "@/api/childCompany/waybill";
export default {
  name: "billStatus",
  props: {
    row: {
      default: {},
      type: Object
    }
  },
  data() {
    return {
      activities: []
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      let result = await getBillLog({
        id: this.row.yund_id ? this.row.yund_id : this.row.id
      });
      this.activities = result.data;
      console.log("result", result, this.activities);
    }
  }
};
</script>

<style lang="scss" scoped>
.billStatus {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .info{
    display: flex;
    justify-content: space-between;
    // padding: 0 10px;
    width: 100%;
    margin-bottom: 30px;
    .content{
      font-weight: bold;
      color: #4a4b4c;
    }
  }
  // height: 300px;
  .el-timeline {
    ::v-deep .el-timeline-item__content {
      font-size: 14px;
    }
    .el-timeline-item {
      padding-bottom: 30px;
    }
    ::v-deep .el-timeline-item__tail{
      border-left: 2px solid $theme-primary;
    }
    ::v-deep .el-timeline-item__node{
      background-color:$theme-primary;
    }
    .title {
      margin-bottom: 10px;
      font-weight: bold;
      color: $theme-primary;
      font-size: 16px;
    }
    // width: 50%;
    // .el-step{
    //     // margin-bottom: 30px;
    //     height: 100px;
    // }
  }
}
</style>
